<template>
	<view style="height: 100%;">
		<view class="canvas" style="height: 563px;">
			<canvas style="height: 100%;width: 100%;" canvas-id="firstCanvas"></canvas>
		</view>
		
		<view class="bottom" @click="saveCans()">保存海报</view>

	</view>
</template>

<script>
import * as user from '@/api/user.js'
	var that
	export default {
		data() {
			return {
				cansWidth: 280, //海报宽度
				cansHeight: 563, //海报高度
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [] ,//海报数组
				detail:'',
				width:'375',
				height:'563',
				share:''
			};
		},
		onLoad: function() {
			
			that = this
			uni.getSystemInfo({
			            success: function (res) {
			            that.Width=res.windowWidth;
			            that.Height=563;
			            // that.Height=res.windowHeight;
			console.log('宽',that.Width,'高',that.Height)
			           }
			 	});
			that.huizhihaibao() //请求海报数据
		},
		methods: {
			
			huizhihaibao() {
				//数据请求结束
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				user.wxewm().then(res=>{
					that.userdata = {
						img: res.data.qrcode //二维码
					}
					that.swiperList = [{
							posterImg: res.data.bgImage//背景图
						},
					]
					uni.downloadFile({
						url: that.userdata.img,
						success: function(res) {
							that.userdata.img = res.tempFilePath
						}
					})
					that.selseimg(that.swiperList[0].posterImg)
				})
				uni.hideLoading();
				//数据请求结束
			},
			selseimg(e) { //绘制海报
				uni.showLoading({
					title: '生成海报中'
				});
				
				const context = uni.createCanvasContext('firstCanvas')

				uni.downloadFile({
					url: e,
					success: function(res) {
						context.drawImage(res.tempFilePath, 0, 0, that.Width, that.Height) //海报背景
					}
				})

				setTimeout(function() { //定时器，海报方法不能立即执行，等页面渲染完成
					// context.drawImage(that.userdata.img,
					// 	10, 280, 260, 110) //个人信息背景
					context.drawImage(that.userdata.img, that.Width/2-50, that.Height/2-50, 100, 100) //二维码图片

					context.setFillStyle('#FFFFFF')
					context.setFontSize(14)
					// context.fillText(that.share, that.Width/2-60, that.Height/1.2+10)
					// context.fill()

					// context.setFillStyle('#333333')
					// context.setFontSize(20)
					// context.fillText(that.userdata.text, 80, 335) //昵称
					// context.fill()

					// context.setFillStyle('#666666')
					// context.setFontSize(12)
					// context.fillText('邀请你加入拾金，', 80, 355)
					// context.fillText('手机就能赚钱！', 80, 375)
					// context.fill()

					context.save()
					context.beginPath()
					context.arc(44, 350, 25, 0, 2 * Math.PI)
					context.clip()
					// context.drawImage(that.userdata.img, 17, 322, 55, 55) //头像
					context.restore()
					context.draw()

					uni.hideLoading();
				}, 2000);

			},
			saveCans(e) { //保存海报
				uni.showLoading({
					title: '保存海报中'
				});

				console.log('保存');
				let tempRatio = 1.5;

				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif

				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: uni.upx2px(750), // 截取的画布的宽750
					height: uni.upx2px(1126), // 截取的画布的高1624
					destWidth: uni.upx2px(750), // 保存成的画布宽度750
					destHeight: uni.upx2px(1126), // 保存成的画布高度1624
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {
									console.log("自己写分享")
								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},


		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
		height: 100%;
	}

	.pageHeader {
		height: var(--status-bar-height);
		background-color: #FFFFFF;
	}

	.box-header {
		position: fixed;
		top: 0upx;
		width: 100%;
		z-index: 100;
	}

	.top-box {
		height: 100upx;
		width: 100%;
	}

	.canvas {
		display: flex;
		justify-content: center;
	}

	.bottom {
			width: 259rpx;
			height: 100rpx;
			background: #FF6600;
			border-radius: 4rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin: 50rpx auto;
		}


	.imglist {
		width: 100%;
		padding: 20upx 0;
		overflow: auto;
		/* background-color: #ffffff; */
	}

	.imglist view {
		display: flex;
		justify-content: space-around;
	}

	.imglist image {
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
	}

	.tishi-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 260upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0upx 0upx;
		text-align: center;
	}

	.tishi-box view {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 50upx;
	}

	.tishi-box image {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.ricth{
		margin: 20rpx 60rpx;
		/* padding: ; */
	}
</style>
